<%= render 'shared/tiny_mce_packs' %>

<% if flash["repository_snapshot_error"] %>
  <%= render 'shared/dialog',
            id: "snapshot-error",
            type: "error",
            shown: true,
            title: t("my_modules.modals.transition_snapshot_error.title"),
            body:
              t(
                "my_modules.modals.transition_snapshot_error.body_html",
                repository: Repository.find(flash["repository_snapshot_error"]["repository_id"]).name
              )
  %>
<% end %>

<% provide(:head_title, t("my_modules.protocols.head_title", project: h(@project.name), module: h(@my_module.name)).html_safe) %>
<% content_for :open_mobile_app_button do %>
  <span class="open-mobile-app-container">
    <%= link_to(pwa_mobile_app_url(@current_team.id, @project.id, @experiment.id, @my_module.id, @protocol.id, @protocol.first_step_id, request.host),
              class: 'btn btn-light-link open-mobile-app-button') do %>
      <%= t('my_modules.open_mobile_app') %>
    <% end %>
  </span>
<% end %>


<%= render partial: 'shared/drag_n_drop_overlay' %>
<div class="content-pane flexible my-module-content my-modules-protocols-index with-grey-background" data-task-id="<%= @my_module.id %>">
  <%= render partial: 'my_modules/header' %>
  <div class="my-module-position-container">
    <!-- Header Actions -->
    <%= render partial: 'my_modules/header_actions' %>
    <!-- Details -->
    <div class="task-section task-information hidden">
      <div id="task-details" class="task-section-header">
        <div class="flex items-center mr-auto">
          <a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#details-container" aria-expanded="false" aria-controls="details-container">
            <i class="sn-icon sn-icon-right"></i>
            <span id="taskDetailsLabel" class="task-section-title">
              <h2>
                <%= t('my_modules.details.title') %>
              </h2>
            </span>
          </a>
          <span class="dropdown task-details-dropdown-container">
            <a href="#"
              id="taskDetailsButton"
              class="btn btn-light btn-black icon-btn dropdown-toggle mr-2"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="true">
              <i class="sn-icon sn-icon-info"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="taskDetailsButton">
              <%= render partial: "module_header_details_popover" %>
            </div>
          </span>
          <span class="task-details-code">
            <%= @my_module.code %>
          </span>
        </div>
      </div>
      <div id="details-container" class="task-details collapse task-section-body">
        <%= render partial: 'my_module_details' %>
      </div>
    </div>
    <!-- Notes -->
    <div class="task-section hidden">
      <div class="task-section-header">
        <a class="task-section-caret" role="button" data-toggle="collapse" href="#notes-container" aria-expanded="true" aria-controls="notes-container">
          <i class="sn-icon sn-icon-right"></i>
          <span class="task-section-title">
            <h2><%= t('my_modules.notes.title') %></h2>
          </span>
        </a>
      </div>
      <div class="collapse in task-section-body" id="notes-container" aria-expanded="true">
        <%= render partial: "my_module_notes" %>
      </div>
    </div>
    <!-- Assigned items -->
    <div class="task-section hidden">
      <div class="task-section-header">
        <a class="task-section-caret" role="button" data-toggle="collapse" href="#assigned-items-container" aria-expanded="true" aria-controls="assigned-items-container">
          <i class="sn-icon sn-icon-right"></i>
          <span class="task-section-title ">
            <h2 class="assigned-items-title" data-assigned-items-count="<%= @assigned_repositories.map(&:assigned_rows_count).sum %>">
              <%= t('my_modules.assigned_items.title') %>
            </h2>
          </span>
        </a>
        <div class="actions-block">
          <% if can_assign_my_module_repository_rows?(@my_module) %>
            <div class="dropdown repositories-assign-container" data-repositories-url="<%= my_module_repositories_dropdown_list_path(@my_module) %>">
              <a href="#" id="repositories-assign-button" class="btn btn-light btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span><%= t('my_modules.assigned_items.assign_from') %></span>
                <span class="sn-icon sn-icon-down"></span>
              </a>
              <ul class="dropdown-menu repositories-dropdown-menu perfect-scrollbar rounded !p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]" aria-labelledby="repositories-assign-button">
              </ul>
            </div>
          <% end %>
        </div>
      </div>
      <div class="collapse in panel-group task-section-body" id="assigned-items-container" aria-expanded="true"
          data-repositories-list-url="<%= my_module_repositories_list_html_path(@my_module) %>">
        <%= render partial: "my_modules/repositories/repositories_list" %>
      </div>

      <%= render partial: "my_modules/repositories/full_view_modal" %>
    </div>
    <!-- Protocol -->
    <div class="task-section">
      <div
          id="protocolContainer"
          data-protocol-url="<%= protocol_my_module_path(@my_module) %>"
          data-date-format="<%= datetime_picker_format_date_only %>"
          data-user-utc-offset="<%= ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).utc_offset %>"
          data-e2e="e2e-CO-task-protocol"
      >
        <protocol-container
          :protocol-url="protocolUrl"
        />
      </div>
    </div>
  </div>
</div>

<%= render partial: "my_modules/modals/update_repository_records_modal" %>


<%= render partial: "my_modules/protocols/print_protocol_modal", locals: { protocol: @protocol, comments_enabled: true} %>

<!-- URL for status bar refreshing -->
<div class="hidden" data-role="protocol-status-bar-url" data-url="<%= protocol_status_bar_protocol_path(@protocol) %>"></div>

<!-- Confirm link update modal -->
<%= render partial: "my_modules/protocols/confirm_link_update_modal" %>

<!-- Load from repository modal -->
<%= render partial: "my_modules/protocols/load_from_repository_modal" %>

<!-- Copy to repository protocol modal -->
<%= render partial: "protocols/index/new_protocol_modal", locals: {type: 'copy'} %>

<!-- Import protocol elements -->
<%= render partial: "protocols/import_export/import_elements" %>

<!-- Create new office file modal -->
<%= render partial: 'assets/wopi/create_wopi_file_modal' %>

<!-- Delete file modal -->
<%= render partial: 'assets/asset_delete_modal' %>

<!-- Consume Stock Modal -->
<%= render partial: 'my_modules/repositories/consume_stock_modal'%>

<!-- Tags modal -->
<div id="tagsModalContainer" class="vue-tags-modal">
  <div ref="tagsModal" id="tagsModalComponent"></div>
  <teleport to="body">
    <tags-modal v-if="tagsModalOpen"
      :params="<%=
        {
          id: @my_module.id,
          permissions: {
            manage_tags: can_manage_my_module_tags?(@my_module)
          },
          urls: {
            assigned_tags: assigned_tags_my_module_my_module_tags_path(@my_module),
            assign_tags: my_module_my_module_tags_path(@my_module)
          }
        }.to_json
      %>"
      :tags-colors="<%= Constants::TAG_COLORS.to_json %>"
      project-name="<%= @experiment.project.name  %>"
      project-tags-url="<%= project_tags_path(@experiment.project) %>"
      @close="close"
      @tags-loaded="syncTags"
    />
  </teleport>
</div>
<div id="accessModalContainer" class="vue-access-modal"
     data-url="<%= my_module_path(@my_module, format: :json) %>"
     data-roles-url="<%= user_roles_projects_path %>"
>
  <div ref="accessModal" id="accessModalComponent"></div>
  <teleport to="body">
    <access-modal
      v-if="accessModalOpen"
      :params="params"
      @close="accessModalOpen = false" />
  </teleport>
</div>

<%= javascript_include_tag 'inputmask' %>
<%= stylesheet_link_tag 'datatables' %>
<%= javascript_include_tag "handsontable.full" %>
<%= render partial: "shared/formulas_libraries" %>
<%= javascript_include_tag("my_modules/protocols") %>
<%= javascript_include_tag("my_modules/tags") %>
<%= javascript_include_tag 'emoji_button' %>
<%= javascript_include_tag("my_modules/repositories") %>
<%= javascript_include_tag("my_modules/pwa_mobile_app") %>
<%= javascript_include_tag 'pdf_js' %>
<%= stylesheet_link_tag 'pdf_js_styles' %>
<%= javascript_include_tag "protocols/new_protocol" %>

<%= javascript_include_tag 'vue_protocol' %>
<%= javascript_include_tag 'vue_legacy_tags_modal' %>
<%= javascript_include_tag 'vue_legacy_access_modal' %>
